<script src="{{ path }}js/plugins/colorpicker/js/bootstrap-colorpicker.js"></script>
<script src="{{ path }}js/demos/demo.ui-elements.js"></script>
<script src="{{ path }}js/plugins/timepicker/jquery.ui.timepicker.min.js"></script>
<script type="text/javascript">
		$("#mat_valor-credito").numeric();
        
		$("#mat_facultad").change(function () {
            $('#mat_semestre').find('option').remove().end();
            $("#mat_facultad option:selected").each(function () {
                semestres = $(this).attr("semestres") + " ";
            });
             
            for(i=0; i<=semestres; i++){
                $('#mat_semestre').append($('<option></option>').attr('value', (i) ).text((i)));
            }
        });
		
		$( '#mat_periodo' ).change(function(){
        	valor = $('#mat_periodo option:selected').attr('meses');
            $('#mat_cuotas').attr('value', valor);
		});
        
</script>
<input type="hidden" id="matricula_editar_id" name="matricula_editar_id" value="{{ matricula.id }}"/>
<table width="100%">
    <tr style="width:100%">
        <td width="33%"><div class="control-group">
        	<label class="control-label" for="input01">Facultad</label>
            <div class="controls"><select name="mat_facultad" id="mat_facultad" class="input-small">
                <option semestres="0" value="0">NINGUNA</option>
                {% for facultad in Facultades %}
            			<option semestres="{{ facultad.semestres }}" value="{{ facultad.id }}" {% if facultad.id == matricula.facultad_id %} selected="selected" {% endif %}>{{ facultad.sigla }}</option>
                {% endfor %}
            </select></div>
        </div></td>
        <td width="33%"><div class="control-group">
            <label class="control-label" for="input01">Periodo</label>
            <div class="controls"><select name="mat_periodo" id="mat_periodo" class="input-small" meses="88">
                <option meses="0" value="0">TODOS</option>
                {% for periodo in Periodos %}
                    <option meses="{{ periodo.meses }}" value="{{ periodo.id }}"  {% if periodo.id == matricula.periodo_id %} selected="selected" {% endif %} >{{ periodo.nombre }}</option>
                {% endfor %}
            </select></div>
        </div></td>
		<td width="33%"><div class="control-group">
            <label class="control-label" for="input01">Semestre</label>
            <div class="controls"><select name="mat_semestre" id="mat_semestre" class="input-small">
            	<option value="0">0</option>
                {% for semestre in semestres %}
                	<option value="{{ semestre.id }}" {% if semestre.id == matricula.semestre %} selected="selected" {% endif %}>{{ semestre.id }}</option>
                {% endfor %}
            </select></div>
		</div></td>
    </tr>
    <tr>
        <td><div class="control-group">
            <label class="control-label" for="input01">Valor crédito</label>
            <div class="controls"><input type="text" class="input-medium" name="mat_valor-credito" id="mat_valor-credito" required="required" value="{{ matricula.valor_credito }}"/></div>
        </div></td>
		<td ><div class="control-group">
            <label class="control-label" for="input01">Valor descuento</label>
            <div class="controls"><input type="text" class="input-medium" name="mat_valor-descuento" id="mat_valor-descuento" required="required" value="{{ matricula.valor_descuento }}"/></div>
        </div></td>
		<td><div class="control-group">
            <label class="control-label" for="input01">Intereses</label>
            <div class="controls"><input type="text" class="input-small" name="mat_intereses" id="mat_intereses" required="required" value="{{ matricula.intereses }}"/></div>
        </div></td>
	</tr>
    <tr>
		<td><div class="control-group">
            <label class="control-label" for="input01">Cuota inicial</label>
            <div class="controls"><input type="text" class="input-small" name="mat_cuota-inicial" id="mat_cuota-inicial" required="required" value="{% for pago in Pagos %} {{ pago.pago.valor }} {% endfor %}"/></div>
        </div></td>
        <td><div class="control-group">
			<label class="control-label" for="input01">Fecha pago inicial:</label>
			<div class="controls">
				<input class="input-small" name="mat_fecha-inicial" id="mat_fecha-inicial" type="text" required="required" value="{% for pago in Pagos %} {{ pago.pago.fecha|date:'m/d/Y' }} {% endfor %}">
			</div></td>
		<td><div class="control-group">
            <label class="control-label" for="input01">Número de cuotas</label>
            <div class="controls"><input type="number" class="input-small" name="mat_cuotas" id="mat_cuotas" min="0" value="{{ matricula.cuotas }}"/></div>
        </div></td>
    </tr>
</table>
<!--
	<input type="hidden" id="matricula_id" name="matricula_id" value="{{ matricula.id }}"/>
    <div class="control-group">
        <label class="control-label" for="input01">Cuota:</label>
        <div class="controls">
            <label class="control-label" for="input01">{{ pagos.cuota_id }}</label>
        </div>
	</div>
    <div class="control-group">
        <label class="control-label" for="input01">Valor:</label>
        <div class="controls">
	        <label class="control-label" for="input01">{{ pagos.valor }}</label>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="input01">Pagado:</label>
        <div class="controls">
            <input type="text" class="input-large" name="pagado" id="pagado" required="required" value="{{ pagos.pagado }}"/>
        </div>
    </div>
    <div class="control-group">
    	<label class="control-label" for="input01">Observacion:</label>
        <div class="controls">
            <textarea type="text" class="input-large" name="pagoobs" id="pagoobs" rows="3">{{ pagos.observacion }}</textarea>
        </div>    
    </div>
-->